<template>
	<div id="container">
		<p>
			线路编号: <el-input placeholder="请输入线路编号" v-model="psLineInfo.linecode"></el-input>
			线路状态:
			<el-select placeholder="请选择" v-model="psLineInfo.runningstatus" style="width: 120px;">
				<el-option label="--请选择--" value=""></el-option>
				<el-option label="正常" value="1"></el-option>
				<el-option label="检修中" value="2"></el-option>
			</el-select>
			<el-button type="success" @click="query()">查询</el-button>
			<el-button plain @click="$router.push('/addLineInfo')">添加线路</el-button>
		</p>
		<el-table :data="psLineInfoList.list" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column align="center" prop="linecode" label="线路编号" width="180"></el-table-column>
			<el-table-column align="center" prop="linename" label="线路名称" width="180"></el-table-column>
			<el-table-column align="center" prop="startpolecode" label="起始杆号"></el-table-column>
			<el-table-column align="center" prop="endpolecode" label="终止杆号"></el-table-column>
			<el-table-column align="center" prop="towerbasenum" label="塔基数"></el-table-column>
			<el-table-column align="center" prop="runningstatus" label="运行状态">
				<template slot-scope="scope">
					{{scope.row.runningstatus === 1 ? '正常':'检修中'}}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="isstart" label="启用状态">
				<template slot-scope="scope">
					{{scope.row.isstart===1?'启用':'停用'}}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="isstart" label="操作">
				<template slot-scope="scope">
					<el-button type="text"
						@click="handlerStatus(scope.row)">{{scope.row.isstart === 1 ? '停用':'启用'}}</el-button>
					<el-button type="text" @click="handlerModify(scope.row)">修改</el-button>
					<el-button type="text" @click="handlerDel(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="block">
			<el-pagination layout="prev, pager, next" :total="psLineInfoList.total" :small="true" :page-size="6"
				@current-change="handlerPage">
			</el-pagination>
		</div>

		<div style="padding: 0.5rem 0.5rem;color: red;">
			<span>1、停用状态下的线路，在任务管理->巡检任务和消缺任务中均为不可使用该线路。</span>
			<el-divider></el-divider>
			<span>2、状态改为停用，其下的所有杆塔数据状态均置为“停用”；“启用”操作同“停用”操作。</span>
			<el-divider></el-divider>
			<span>3、删除分为两步：1、线路信息表中该数据物理删除2、杆塔信息表中该线路的所有杆塔数据的线路字段清空 </span>
		</div>
	</div>
</template>

<script>
	import {
		queryAllPsLineInfo,
		modifyCurrentStartStatus,
		delLineInfo
	} from '../../config/request.js'
	export default {
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				} else if (rowIndex === 5) {
					return 'warning-row';
				}
				return '';
			},
			loadAllDatas() {
				queryAllPsLineInfo(this.psLineInfo).then(res => {
					this.psLineInfoList = res.data.pageInfo;
				}).catch(err => {
					this.$notify.error({
						title: '错误',
						message: err,
						duration: 2000
					})
				})
			},
			handlerPage(event) {
				this.psLineInfo.pageNum = event;
				this.loadAllDatas();
			},
			query() {
				this.loadAllDatas();
			},
			handlerStatus(obj) {
				modifyCurrentStartStatus(obj).then(res => {
					if (res.code === 200) {
						this.$message.success('保存成功');
						this.loadAllDatas();
					}
				}).catch(err => {
					this.$notify.error({
						title: '请求错误',
						message: err,
						duration: 1500
					})
				})
			},
			handlerModify(obj) {
				this.$router.push({
					path: '/modifyLineInfo',
					query: {
						id: obj.id
					}
				})
			},
			handlerDel(obj) {
				if(confirm('确定要删除吗？')){
					delLineInfo(obj).then(res => {
						if(res.code === 200){
							this.$message.success('删除成功');
							this.loadAllDatas();
						}
					}).catch(err => {
						this.$notify.error({
							title: '请求错误',
							message: err,
							duration: 1500
						})
					})
				}
			}
		},
		data() {
			return {
				psLineInfoList: [],
				psLineInfo: {
					linecode: '',
					runningstatus: '',
					pageNum: ''
				}
			};
		},
		mounted() {
			this.loadAllDatas();
		},
		/* watch: {
			'psLineInfo.pageNum'(n,o){
				console.log('新:'+n);
				console.log('旧:'+o);
			}
		} */
	};
</script>

<style>
	#container {
		width: 100%;
	}

	.el-input__inner {
		border-radius: 4px;
		border: 1px solid #c0ccda;
		padding: 6px 12px;
		transition: border-color 0.2s;
	}

	.el-select {
		width: 500px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>